<template>
  <div class="container">
    <div class="top">问题清单</div>
    <!-- 管理端 -->
    <div class="box" v-if="role==='manage'">
      <div class="top1">
        <div class="left">
          <span>整改对象：</span>
          <el-input v-model="input1" class="first"></el-input>
          <span>状态：</span>
          <el-select v-model="value" placeholder="请选择" class="second">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-button type="primary" @click="qusetionSearch">查询</el-button>
          <el-button @click="resetOne">重置</el-button>
        </div>
        <!-- 创建 -->
        <div class="right">
          <el-button
            type="primary"
            @click="add"
            class="add"
            v-if="_SHOWBTN('xsxc-wtqd_manage-cj')"
          >+创建</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <el-table :data="tableData" border stripe style="width: 1540px;">
        <el-table-column type="index" label="序号" width="54px" align="center"></el-table-column>
        <el-table-column prop="orgName" label="整改对象" width="234px" align="center"></el-table-column>
        <el-table-column prop="category" label="问题分类" width="234px" align="center"></el-table-column>
        <el-table-column prop="name" label="问题清单" width="516px"></el-table-column>
        <el-table-column prop="finalEndDate" label="整改完成时限" width="158px" align="center"></el-table-column>
        <el-table-column label="完成进度" width="120px" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.completed == scope.row.total ? '' : 'nofinish'">
              <span>{{ scope.row.completed }}</span>
              <span>/</span>
              <span>{{ scope.row.total }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="223px" align="center">
          <template slot-scope="scope">
            <el-button
              class="five margin"
              @click="check(scope.row.id)"
              v-if="_SHOWBTN('xsxc-wtqd_manage-xq')"
            >查看</el-button>
            <el-popconfirm
              v-if="scope.row.completed !== scope.row.total"
              title="确定催办该信息吗？"
              hideIcon
              cancelButtonType="button"
              @onConfirm="urgeToDo(scope.row.id)"
            >
              <el-button
                slot="reference"
                class="five"
                type="warning"
                v-if="_SHOWBTN('xsxc-wtqd_manage-cb')"
              >催办</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          background
          :page-sizes="[10,20,30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>

    <!-- 上报端 -->
<!-- v-if="role=='upload'" -->
    <div class="box" v-if="role=='upload'">
      <div class="top1">
        <div class="left">
          <!-- <span>整改对象：</span>
          <el-input v-model="input1" class="first"></el-input>-->
          <span>状态：</span>
          <el-select v-model="value" placeholder="请选择" class="second">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>

          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="ressetTwo">重置</el-button>
        </div>
        <!-- 创建 -->
        <!-- <div class="right">
          <el-button type="primary" @click="add=true" class="add">+创建</el-button>
        </div>-->
      </div>
      <!-- 表格 -->
      <el-table :data="tableData1" border stripe style="width: 1540px;">
        <el-table-column type="index" label="序号" width="53px" align="center"></el-table-column>
        <el-table-column prop="category" label="问题分类" width="234px" align="center"></el-table-column>
        <el-table-column prop="name" label="问题清单" width="751px"></el-table-column>
        <el-table-column prop="remainingDays" label="剩余天数" width="158px" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.remainingDays > 5 ? '' : 'nofinish'">
              <span>{{ scope.row.remainingDays }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="完成进度" width="120px" align="center">
          <template slot-scope="scope">
            <div :class="scope.row.completed == scope.row.total ? '' : 'nofinish'">
              <span>{{ scope.row.completed }}</span>
              <span>/</span>
              <span>{{ scope.row.total }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="223px" align="center">
          <template slot-scope="scope">
            <el-button
              class="five"
              @click="check(scope.row.id)"
              v-if="_SHOWBTN('xsxc-wtqd_upload-xq')"
            >查看</el-button>
            <span  v-if="_SHOWBTN('xsxc-wtqd_upload-hb')" class="er">
              <el-button
                type="primary"
                class="five"
                @click="report(scope.row.id)"
                v-if="scope.row.completed !== scope.row.total"
              >汇报</el-button>
            </span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="fenye">
        <el-pagination
          @size-change="handleSizeChange1"
          @current-change="handleCurrentChange1"
          :current-page="page"
          background
          :page-sizes="[10,20,30]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 问题清单列表（管理端）
      code:'xsxc-wtqd',
      params: {
        orgName: "",
        status: "",
        pageNum: 1,
        pageSize: 10,
      },
      //  问题清单列表（上传端）
       
      params1: {
        pageNum: 1,
        pageSize: 10,
      },
      //   整改对象
      input1: "",
      page: 1,
      size: 10,
      // 状态
      value: "",
      options: [
        {
          value: "",
          label: "全部",
        },
        {
          value: 0,
          label: "未完成",
        },
        {
          value: 1,
          label: "已完成",
        },
      ],
      //   表格列表数据(管理)
      tableData: [],
      //   表格列表数据(上报)
      tableData1: [],
      //   总条数
      total: 0,
    };
  },
  created() {
    this.get();
    this.get1();
  },
  computed: {
			permissionBycode(){
				return this.$store.getters['PortalManagement/getPermissionBycode'](this.code)
			},
			role() {
				if (this.permissionBycode.includes(this.code + '_manage')) {
					return 'manage'
				} else if (this.permissionBycode.includes(this.code + '_upload')) {
					return 'upload'
				} else {
					return ''
				}
      },
  },
  methods: {
    // 问题清单列表(管理端)
    get() {
      this.Api.questionList({
        orgName: "",
        status: "",
        pageNum: this.page,
        pageSize: this.size,
      }).then((res) => {
        console.log(res);
        this.tableData = res.data.records;
        this.total = res.data.total;
      });
    },
    // 搜索
    qusetionSearch() {
      this.Api.questionList({
        orgName: this.input1,
        status: this.value,
        pageNum: this.page,
        pageSize: this.size,
      }).then((res) => {
        this.tableData = res.data.records;
        this.total = res.data.total;
        console.log(123);
      });
    },
    // 重置
    resetOne() {
      (this.input1 = ""), (this.value = ""), this.get();
    },
    add() {
      this.$router.push("/index/Patrol/Question/Creat");
    },
    urgeToDo(id) {
      let ids=[];
      ids.push({ id: id })
      this.Api.cuiban({ ids: ids}).then((res) => {
        if (res.code == 0) {
          this.$message.success("催办成功");
        } else {
          return this.$message.error(res.message);
        }
      });
    },
    check(id) {
      this.$router.push({ name: "QuestionInfo", query: { id: id,role:this.role } });
    },
    // 问题清单列表(上报端)
    get1() {
      this.Api.questionList1({
        pageNum: this.page,
        pageSize: this.size,
      }).then((res) => {
        console.log(res);
        this.tableData1 = res.data.records;
        this.total = res.data.total;
      });
    },
    // 搜索
    search() {
      this.Api.questionList1({
        pageNum: this.page,
        pageSize: this.size,
        status: this.value,
      }).then((res) => {
        console.log(res);
        this.tableData1 = res.data.records;
        this.total = res.data.total;
      });
    },
    ressetTwo() {
      (this.value = ""), this.get1();
    },
    report(id) {
      console.log(id);
      this.$router.push({ name: "QuestionReport", query: { id: id } });
    },

    // 分页
    //数据条数发生变化
    handleSizeChange(newSize) {
      this.size = newSize;
      if (this.input1 == "" && this.value == "") {
        this.get();
      } else {
        this.qusetionSearch();
      }
    },
    //翻页触发
    handleCurrentChange(currPage) {
      this.page = currPage;
      if (this.input1 == "" && this.value == "") {
        this.get();
      } else {
        this.qusetionSearch();
      }
    },
    // 分页
    //数据条数发生变化
    handleSizeChange1(newSize) {
      this.size = newSize;
      if (this.value == "") {
        this.get1();
      } else {
        this.search();
      }
    },
    //翻页触发
    handleCurrentChange1(currPage) {
      this.page = currPage;
      if (this.value == "") {
        this.get1();
      } else {
        this.search();
      }
    },
  },
};
</script>
<style lang="less" scoped>
.er{
  margin-left: 20px;
}
.top {
  width: 1540px;
  height: 68px;
  line-height: 68px;
  color: #333333;
  font-size: 20px;
  border-bottom: 1px solid #dddddd;
  box-sizing: border-box;
}

.top1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 35px;
}
.left {
  display: flex;
  margin-top: 19px;
  align-items: center;
}
.right {
  margin-top: 19px;
}
/deep/.left .el-input__inner {
  width: 154px;
  height: 36px;
}
/deep/.left .el-input {
  width: 154px;
}
.left span {
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  color: #333333;
}
.el-button {
  width: 52px;
  height: 36px;
  padding: 0;
}
.five {
  width: 60px;
  height: 28px;
}
.margin {
  margin-right: 20px;
}
.first,
.second,
.third {
  margin-right: 20px;
}
/deep/ .add.el-button {
  width: 80px;
}
/deep/.el-pagination {
  white-space: nowrap;
  padding: 2px 5px;
  color: #303133;
  font-weight: 700;
  margin-left: 850px;
  margin-top: 46px;
}
/deep/.el-pagination__jump {
  margin-left: 0;
  font-weight: 400;
  color: #606266;
}
.up {
  margin-right: 23px;
}
/deep/.el-dialog__header {
  padding: 20px 20px 10px;
  background: #e6e9ed;
}

/deep/.el-form-item__label {
  width: 82px !important;
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}
.fenye {
  display: flex;
  justify-content: flex-end;
}
.nofinish {
  color: #fb363f;
}
</style>